<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="isShowDialogComponent"
      width="50%"
      :before-close="handleClose"
    >
      <!--      添加和编辑页面的表单-->
      <el-form
        ref="teachersRef"
        :model="teachersForm"
        label-width="120px"
        :rules="teachersRules"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)"
      >
        <el-form-item label="教师姓名" prop="Name">
          <el-input v-model="teachersForm.Name"></el-input>
        </el-form-item>
        <el-form-item label="教师头像" prop="Image">
          <!--          引入封装好的组件-->
          <upload-img
            :width="9"
            :height="16"
            @showImage="showImage"
            :image="teachersForm.Image"
            :judge-id="judgeId"
          >
          </upload-img>
        </el-form-item>
        <el-form-item label="手机号码" prop="Phone">
          <el-input v-model="teachersForm.Phone"></el-input>
        </el-form-item>
        <el-form-item label="教师描述" prop="Describe">
          <el-input type="textarea" v-model="teachersForm.Describe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
//导入上传图片的组件
import UploadImg from '../../../components/base/uploadPictures/UploadImg'
//导入网络请求封装的类
import TeachersManage from '../../../model/teachersManage'
//验证规则
import ProofRules from '../../../ck/util/proofRules'
export default {
  name: 'AddOrEditDialog',
  components: {
    UploadImg
  },
  props: {
    //向父组件要title值
    title: String,
    //向父组件要控制页面显示与否的值
    isShowDialogComponent:Boolean,
    //向父组件要id值，用于判断用户点击的是添加/编辑
    judgeId:Number
  },

  data () {

    return {
      loading: false,
      //教师的表单
      teachersForm: {
        Name: '',
        Image: '',
        Describe: '',
        Phone: ''
      },
      //表单中的验证规则
      teachersRules: {
        Name:ProofRules.requiredFieldAndLength('教师名称',2,10),
        Phone: ProofRules.MobileMethod('手机号码'),
        Describe:ProofRules.requiredFieldAndLength('教师描述',1,200)
      },

    }
  },
  created () {
    this.judgeEditButton()
  },
  methods: {
    //当对话框关闭的时候触发
    handleClose (payload) {
      this.$emit('dialogHandleClose',payload)
    },
    //点击对话框中的确定按钮触发
    async submitEvent () {
      // console.log(this.teachersForm)
      //真正发起网络请求前，先进行表单必填项的验证
      await this.$refs.teachersRef.validate(async valid => {
          //如果验证通过，进行以下操作
          if (!valid) {
            this.$message.error('请填写表单必填项')
          } else {
            //判断头像是否上传
            if (this.teachersForm.Image === '') {
              return this.$message.error('教师头像为必传项，请上传')
            } else {
              try {
                if (this.judgeId === 0) {
                  this.loading = true
                  await TeachersManage.addTeachers(this.teachersForm)
                  this.loading = false
                  this.$message.success('添加教师成功')
                 this.handleClose('submitButton')
                } else {
                  //如果this.juedgeId!==0,那么就调用提交编辑的按钮
                  this.loading = true
                  await TeachersManage.editTeachersInfo(this.judgeId, this.teachersForm)
                  this.loading = false
                  this.$message.success('编辑教师信息成功')
                  this.handleClose('submitButton')
                }
              } catch (err) {
                this.loading = false
              }
            }
          }
        }
      )
    },
    //判断是否点击的是编辑按钮
    async judgeEditButton () {
      if (this.judgeId !== 0) {
        try {
          this.loading = true
          const res = await TeachersManage.showTeachersInfo(this.judgeId)
          this.loading = false
          this.teachersForm = res
        } catch (error) {
          this.loading = false
        }
      }
    },
    showImage (result) {
      this.teachersForm.Image = result
    }

  }

}
</script>

<style scoped>

</style>
